<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>隔壁租客竟敢吃我的猫咪？</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="style/common.css" />
    <link rel="stylesheet" href="style/page.css" />

    <script type="text/javascript" src="js/main.js"></script>
    <script>
        function randomUuid() {
            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
                const r = Math.random() * 16 | 0;
                const v = c === "x" ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
    </script>
</head>

<body>
    <!-- 
        TODO list
        14. 分享内容
     -->

    <div class="warp bg wrap_left">

        <!-- 加载中 start -->
        <div class="page" id="loading">
            <div class="bg">
                <img src="images/loading/loading_bg.jpg">
            </div>
            <div class="loading auto-x" data-step="s1" data-top="360">
                <div class="loading__cat">
                    <img src="images/loading/loading_cat.png">
                </div>
                <div class="loading__bar">
                    <img src="images/loading/loading_bar.png">
                </div>
                <div id="loading-percent" class="loading__num">
                    0%
                </div>
            </div>
        </div>
        <!-- 加载中 end -->

        <!-- 封面 start -->
        <div class="page bg none" id="p0">
            <div class="bg">
                <img src="images/cover/cover_bg.jpg">
            </div>

            <!-- 捉拿凶手-按钮 -->
            <div class="cover__btn">
                <img src="images/cover/cover_btn.png">
            </div>

            <!-- 我的奖品-按钮 -->
            <div class="cover__btn-prize none" data-top="540">
                <img src="images/cover/cover_btn-mine.png">
            </div>

            <!-- 我的奖品-弹框 -->
            <div class="cover__prize-wrap auto-x bg_black none">
                <div class="cover__prize auto-x">
                    <div class="cover__prize-bg">
                        <img src="images/cover/cover_prize-bg.png">
                    </div>
                    <div class="cover__prize-btn">
                        <img src="images/cover/cover_prize-btn.png">
                    </div>
                    <div class="cover__prize-img auto-x">
                        <!-- 手机 -->
                        <img src="images/prize/1.png" class="p0-prize p0-prize-4 none">
                        <!-- 耳机 -->
                        <img src="images/prize/2.png" class="p0-prize p0-prize-3 none">
                        <!-- 抱枕 -->
                        <img src="images/prize/3.png" class="p0-prize p0-prize-2 none">
                        <!-- 优惠券 -->
                        <div class="prize-coupon p0-prize p0-prize-1">
                            <img src="images/prize/4.png">

                            <div class="prize-coupon_text auto-x">
                                <h2>400</h2>
                                <span>【 兑换码：
                                    <span id="p0-prize-code"></span> 】</span>
                                <p>仅限Z17 128G版本</p>
                                <p>2017/12/20--2018/01/02有效</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 封面 end -->

        <!--音乐 start-->
        <div id="music">
            <div class="music play"></div>
        </div>
        <!--音乐 end-->

        <!-- socket链接失败 start -->
        <div class="page bg bg_black none" id="socket">
            <div class="socket__tips auto-x">
                <div class="socket__tips-text">
                    对方已离线
                    <br>请重新开始
                </div>
                <div class="socket__tips-bg">
                    <img src="images/cover/cover_prize-bg.png">
                </div>
                <div class="socket__tips-btn">
                    <img src="images/cover/cover_prize-btn.png">
                </div>
            </div>
        </div>
        <!-- socket链接失败 end -->
    </div>

    <!--下面是竖屏提示,性能原因丢最后-->
    <div id="orientLayer" class="mod-orient-layer">
        <div class="mod-orient-layer__content">
            <i class="icon mod-orient-layer__icon-orient"></i>
            <div class="mod-orient-layer__desc">为了更好的体验，请使用竖屏浏览</div>
        </div>
    </div>

    <link rel="stylesheet" type="text/css" href="style/print.css">
    
    <!-- 微信userinfo -start-  -->
    <script type="text/javascript" src="js/weixin.js"></script>
    <script src="//cdn.h5case.com.cn/h6app_userInfo.1.1.0.min.js"></script>
    <!-- 微信userinfo -end-  -->

    <script type="text/javascript" src="http://115.159.69.89:3002/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/qrcode.min.js"></script>

    <script src="./js/girl-page/loading.js"></script>
    <script src="./js/girl-page/p0.js"></script>
    <script src="./js/girl-page/p1.js"></script>
    <script src="./js/girl-page/p2.js"></script>
    <script src="./js/girl-page/p3.js"></script>
    <script src="./js/girl-page/p4.js"></script>
    <script src="./js/girl-page/p6.js"></script>
    <script src="./js/girl-page/p7.js"></script>
    <script src="./js/girl-page/pk.js"></script>
    <script src="./js/girl-page/p9.js"></script>
    <script src="./js/girl-page/p11.js"></script>

    <script src="./js/girlSceneList.js"></script>
    <script src="./js/scene.js"></script>
    <script src="./js/girl.js"></script>
    <script>
        var keyTime = 200; // 打字的速度
        // var openid = 'obFweuJSET3XDQKc01VI6rB1KSIc';
        var openid = getOpenid();
        var sign = getSign();

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
        window.onload = function() {
            resetTop();
            music('bgm');

            window.girl = new Girl(openid)
            window.scene = new Scene(sceneList, girl);
            var restart = getQueryString("restart");
            if (restart) {
                window.scene.enter(sceneList.find(function(s) {
                    return s.name === "p2.s70";
                }));
            } else {
                window.scene.next();
            }
            window.girl.on("boy.disconnect", function() {
                document.getElementById("socket").classList.remove('none');
                document.querySelector(".socket__tips-btn").addEventListener("click", function() {
                    var currentHref = window.location.href;
                    currentHref = currentHref.replace(/\?[\s\S]*/, "");
                    currentHref += "?restart=true";
                    window.location = currentHref;
                });
            });
        }
    </script>

    <script type="text/javascript" src="js/other.js"></script>
</body>

</html>